<template name="order-view">
    <view class="container">
        <view class="mainImg">
            <u-image
                :src="order.mainImg"
                width="198rpx"
                height="198rpx"
            ></u-image>
            <block v-if="order.type==='grab'">
                <view v-if="order.state === 'win'||order.state === 'complete'" class="win-tag"></view>
                <view v-if="order.state === 'lost'" class="lost-tag"></view>
            </block>
        </view>
        <view class="order-info" v-if="order.type=='order'">
            <u-text
                :text="order.productName"
                :lines="1"
                size="28rpx"
                block
                color="#000000"
            ></u-text>
            <view class="specName">{{ order.specName }}</view>
            <u-text
                :text="order.state|stateText"
                size="24rpx"
                block
                :color="order.state === 'wait_pay'? '#356CE7':'#888888'"
                margin="30rpx 0 0 0"
            ></u-text>
            <view class="price" v-if="order.price != order.totalPrice && order.totalPrice">
                <view class="total-price">
                    <u-text
                        text="总价"
                        size="24rpx"
                        color="#000000"
                    ></u-text>
                    <u-text
                        :text="order.totalPrice"
                        size="30rpx"
                        prefixIcon="rmb"
                        iconStyle="font-size: 22rpx; color: #B6B6B6; font-weight: bold;top: 10rpx;"
                        bold
                        color="#B6B6B6"
                        decoration="line-through"
                        margin="0 0 0 10rpx"
                    ></u-text>
                </view>
                <view class="coupon-price">
                    <u-text
                        text="优惠价"
                        size="24rpx"
                        color="#000000"
                    ></u-text>
                    <u-text
                        :text="order.price"
                        size="30rpx"
                        prefixIcon="rmb"
                        iconStyle="font-size: 22rpx; color: #000000; font-weight: bold;top: 10rpx;"
                        bold
                        color="#000000"
                        margin="0 0 0 10rpx"
                    ></u-text>
                </view>
            </view>
            <view class="price" v-else>
                <view class="total-price">
                    <u-text
                        text="总价"
                        size="24rpx"
                        color="#000000"
                    ></u-text>
                    <u-text
                        :text="order.price"
                        size="30rpx"
                        prefixIcon="rmb"
                        iconStyle="font-size: 22rpx; color: #000000; font-weight: bold;top: 10rpx;"
                        bold
                        color="#000000"
                        margin="0 0 0 10rpx"
                    ></u-text>
                </view>
            </view>
            <view v-if="order.state === 'wait_pay'" @click.stop="paysubmit()" class="btn">立即付款</view>
        </view>
        <view class="order-info" v-else>
            <u-text
                :text="order.productName"
                :lines="1"
                size="28rpx"
                block
                color="#000000"
            ></u-text>
            <view class="tag">
                <view v-if="isShowTags == '1'" class="nft-tag"></view>
                <view class="qg-tag"></view>
            </view>
            <!--view v-else class="shop-tag"></view-->
            <!--u-text
                :text="order.specName"
                size="24rpx"
                block
                color="#000000"
            ></u-text-->
            <u-text
                :text="grabStateText(order.state)"
                size="24rpx"
                block
                color="#888888"
                v-if="order.state !== 'wait'"
                margin="30rpx 0 0 0"
            ></u-text>
            <u-count-down
                :time="order.grabEndTime"
                format="HH:mm:ss"
                autoStart
                @change="onChange"
                v-else
            >
                <view class="time">
                    <view class="time-title">等待开奖</view>
                    <text class="time-item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}:</text>
                    <text class="time-item">{{ timeData.minutes>=10? timeData.minutes:'0'+timeData.minutes }}:</text>
                    <text class="time-item">{{ timeData.seconds>=10? timeData.seconds:'0'+timeData.seconds }}</text>
                </view>
            </u-count-down>
            <view class="price" v-if="order.price != order.totalPrice && order.totalPrice">
                <view class="total-price">
                    <u-text
                        text="总价"
                        size="24rpx"
                        color="#000000"
                    ></u-text>
                    <u-text
                        :text="order.totalPrice"
                        size="30rpx"
                        prefixIcon="rmb"
                        iconStyle="font-size: 22rpx; color: #B6B6B6; font-weight: bold;top: 10rpx;"
                        bold
                        color="#B6B6B6"
                        decoration="line-through"
                        margin="0 0 0 10rpx"
                    ></u-text>
                </view>
                <view class="coupon-price">
                    <u-text
                        text="优惠价"
                        size="24rpx"
                        color="#000000"
                    ></u-text>
                    <u-text
                        :text="order.price"
                        size="30rpx"
                        prefixIcon="rmb"
                        iconStyle="font-size: 22rpx; color: #000000; font-weight: bold;top: 10rpx;"
                        bold
                        color="#000000"
                        margin="0 0 0 10rpx"
                    ></u-text>
                </view>
            </view>
            <view class="price" v-else>
                <view class="total-price">
                    <u-text
                        text="总价"
                        size="24rpx"
                        color="#000000"
                    ></u-text>
                    <u-text
                        :text="order.price"
                        size="30rpx"
                        prefixIcon="rmb"
                        iconStyle="font-size: 22rpx; color: #000000; font-weight: bold;top: 10rpx;"
                        bold
                        color="#000000"
                        margin="0 0 0 10rpx"
                    ></u-text>
                </view>
            </view>
            <view @click.stop="wxPayment(order.id)" v-if="order.state === 'win'"  class="btn">立即付款</view>
        </view>
    </view>
</template>
<script>
export default {
    name: "order-view",
    props: {
        order: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            timeData: {},
            orderStateMap: {
                "wait_pay": "待支付",
                "ship": "待发货",
                "receipt": "待收货",
                "complete": "已完成",
                "close": "已关闭"
            }
        }
    },
    filters: {
      stateText(val) {
          switch (val) {
              case "wait_pay":
                return "待付款"
              case "ship":
                  return "待发货"
              case "receipt":
                  return "待收货"
              case "complete":
                  return "已完成"
              case "close":
                  return "已关闭"
          }
      }
    },
    computed: {
        isShowTags() {
            return this.$store.getters.isShowTags
        }
    },
    methods: {
        async paysubmit() {
            this.$emit("orderPay", this.order)
        },
        grabStateText(state, payAt) {
            if (state === 'win') {
                return "待付款"
            } else if(state === 'complete') {
                return "已完成"
            } else if(state === 'lost') {
                return "已完成"
            } else if(state === 'close') {
                return "已关闭"
            }
        },
        onChange(e) {
            this.timeData = {
                hours: e.hours + e.days * 24,
                minutes: e.minutes,
                seconds: e.seconds
            }
        },
        wxPayment() {
            this.$emit("orderPay", this.order)
        },
        navigateTo(path, params={}) {
            uni.$u.route({
                url: path,
                params
            })
        },
    }
}
</script>
<style lang="scss" scoped>
    .container{
        display: flex;
        .mainImg {
            position: relative;
            .win-tag {
                //z-index: 999;
                position: absolute;
                background: url("https://img.ionepin.com/8ccb5b789f49a5944bd71388ed8f5ce80b1a868f.png") no-repeat;
                background-size: 100% 100%;
                width: 130rpx;
                height: 130rpx;
                top: 50%;
                left: 50%;
                margin-top: -65rpx;
                margin-left: -65rpx;
            }
            .lost-tag {
                position: absolute;
                background: url("https://img.ionepin.com/9463cdc422689873abb9988aede194e8fb0d1924.png") no-repeat;
                background-size: 100% 100%;
                width: 130rpx;
                height: 130rpx;
                top: 50%;
                left: 50%;
                margin-top: -65rpx;
                margin-left: -65rpx;
            }
        }
        .order-info {
            flex: auto;
            margin-left: 20rpx;
            position: relative;
            .btn {
                box-sizing: border-box;
                position: absolute;
                right: 10rpx;
                bottom: 0;
                width: 146rpx;
                //height: 50rpx;
                border-radius: 25rpx;
                border: 1rpx solid #356CE7;
                font-size: 22rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #356CE7;
                text-align: center;
                padding: 8rpx 0;
            }
        }
        .tag {
            margin-top: 15rpx;
            display: flex;
            .nft-tag {
                width: 100rpx;
                height: 36rpx;
                background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/967825cfb630bf72832c10b8d3ed3d64ad249bc8.png) no-repeat;
                background-size: 100% 100%;
            }
            .shop-tag {
                width: 100rpx;
                height: 36rpx;
                margin: 20rpx 0 10rpx 0;
            }
            .qg-tag {
                margin-left: 16rpx;
                width: 100rpx;
                height: 36rpx;
                background: url(https://img.ionepin.com/d6d0807f7cef624b21f5ea0e8b145740a9615a17.png) no-repeat;
                background-size: 100% 100%;
            }
        }
        .specName {
            height: 33rpx;
            line-height: 33rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            margin-top: 14rpx;
        }
        .price {
            display: flex;
            margin-top: 20rpx;
            .total-price {
                display: flex;
            }
            .coupon-price {
                margin-left: 20rpx;
                display: flex;
            }
        }
        .time {
            margin-top: 20rpx;
            display: flex;
            .time-title {
                font-size: 24rpx;
                font-weight: 400;
                color: #FA6400;
                margin-right: 8rpx;
                line-height: 33rpx;
            }
            .time-item {
                font-size: 24rpx;
                font-weight: 400;
                color: #FA6400;
                line-height: 33rpx;
            }
        }
    }
</style>
